<template>
	<view class="container" style="display: flex;flex-direction: column;">
		<view class="top" style="width: 100%;height: 76rpx;background-color: #FFF;">
			<u-search placeholder="请输入商品名称" v-model="itemName" @search='search' @custom='search'></u-search>
		</view>
		<!-- 占位 -->
		<view style="width: 750rpx;height: 76rpx;flex-shrink: 0;z-index: -1;"></view>
		<div style="display: flex;flex-direction: row;width: 100%;background-color: #EFEFEF;" class="content">
			<scroll-view class="left" scroll-y="true" style="position: fixed;width: 180rpx;height:100vh;background-color: #EFEFEF;display: flex;flex-direction: column;align-items: center;flex-shrink: 0;overflow-y: auto;"
			:style="{
				'width': nodeModel.marginLeft+'rpx'
			}">
				<block v-if="nodeModel.isShowForBtn1">
					<view style="display: flex;flex-direction: row;align-items: center;height: 50px;line-height: 50px;">
						<view style="width: 15px;height: 1px;background-color: #666666;"></view>
						<view style="margin: 0 5px;color: #666666;font-size: 14px;">{{nodeModel.options1}}</view>
						<view style="width: 15px;height: 1px;background-color: #666666;"></view>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;width: 100%;">
						<view v-for="(item, index) of titleForGroup1" :key='index' @click="menuAction(item)" style="width: 100%;line-height: 20px;text-align: center;font-size: 15px;padding: 20rpx 0;" 
					:style="{
						'color': item.isShow?nodeModel.colorForBtn1:'#666666',
						'background-color': item.isShow?nodeModel.backgroundColorForBtn1:'#EFEFEF',
					}">{{item.title}}</view>
					</view>
				</block>
				<block v-if="nodeModel.isShowForBtn2">
					<view style="display: flex;flex-direction: row;align-items: center;height: 50px;line-height: 50px;">
						<view style="width: 15px;height: 1px;background-color: #666666;"></view>
						<view style="margin: 0 5px;color: #666666;font-size: 14px;">{{nodeModel.options2}}</view>
						<view style="width: 15px;height: 1px;background-color: #666666;"></view>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;width: 100%;">
						<view v-for="(item, index) of titleForGroup2" :key='index' @click="menuAction(item)" style="height: 50px;width: 100%;line-height: 50px;text-align: center;font-size: 15px;" 
						:style="{
							'color': item.isShow?nodeModel.colorForBtn1:'#666666',
							'background-color': item.isShow?nodeModel.backgroundColorForBtn1:'#EFEFEF',
						}">{{item.title}}</view>
					</view>
				</block>
			</scroll-view>
			
			<view style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;background-color: #f8f8f8;" class="content"
			:style="{
				'marginLeft': nodeModel.marginLeft+'rpx'
			}">
				<!-- <view v-for="(item, index) in itemList" :key="index" @click="itemHandle(item)">
					<jc-iteminfo-container :nodeModel='nodeModel' :item='item'></jc-iteminfo-container>
				</view> -->
				<view v-for="(item, index) in itemList" :key='index' @click="itemHandle(item)"
				style="display: flex;flex-direction: column;margin-top: 16rpx;background-color: #FFF;width: 270rpx;margin-left: 8rpx;">
					<image :src="item.coverUrl" mode='aspectFill' style="width: 100%;height: 340rpx;"></image>
					<view style="padding: 16rpx;">
						<view style="font-size: 28rpx;" class="limitLineNumOfTwo">{{item.name}}</view>
						<view style="margin-top: 10rpx;color: #fa3534;" v-if="item.activityKey=='incomesDeduction'">
							<text v-if="item.suggestSellingPrice>0">¥{{ $count.mul(item.suggestSellingPrice||0, 1) }}</text>
							<text v-if="item.suggestSellingPrice>0">+</text>
							<text>{{ $count.mul(item.suggestIncomesPrice||0, 1) }}积分</text>
						</view>
						<view v-else style="margin-top: 10rpx;color: #fa3534;">¥{{$count.mul(item.suggestSellingPrice||0, 1)}}</view>
					</view>
				</view>
			</view>
		</div>
		<jcTabbarItem :current="currentTabbarIndex" :list='dynamicTabbar'></jcTabbarItem>
	</view>
</template>

<script>
	export default{
		components: {},
		props:{
			itemModel: {
				type: Object,
				default: ()=>{}
			},
		},
		data() {
			return {
				type: '',
				page: 1,
				size: 20,
				dynamicTabbar: [],
				currentTabbarIndex: 0,
				titleForGroup1: [],
				titleForGroup2: [],
				lastItem: {},
				itemList: [],
				nodeList: [],
				nodeModel: {},
				pageConfig: {},
				selectAdvert: [{}],
				itemName: ''
			}
		},
		onLoad() {
		},
		methods:{
			onShow(){
				console.log('jc-itemCate-show')
			},
		}
	}
</script>

<style scoped lang="scss">
	
</style>
